<%--
  Created by IntelliJ IDEA.
  User: 谢兴鑫
  Date: 2022/5/9
  Time: 下午 07:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>

    <script>
        layui.use(['table','util','jquery','layer','laypage'],function () {
            var table = layui.table,util = layui.util,$ = layui.jquery,layer = layui.layer,form = layui.form,laypage = layui.laypage;
            //表格渲染

            var  tabStaff = table.render({
                elem:'#tableData'//指定原始表格元素选择器（推荐id选择器）
                ,cols:[[//表头
                    // { type: 'checkbox', align: "center", fixed: "left", style: "height:50px;"},
                    {field:'holidayId',title:'编号',sort:true,align:'center'},
                    {field:'empId',title:'姓名',sort:true,align:'center'},
                    {field:'holidayDay',title:'请假时长',sort:true,align:'center'},
                    {field:'startTime',title:'开始时间',sort:true,align:'center'},
                    {field:'endTime',title:'结束时间',sort:true,align:'center'},
                    {field:'title',title:'原因',sort:true,align:'center'},
                    {field:'status',title:'状态',sort:true,align:'center'},
                    {field:'remark',title:'备注',sort:true,align:'center'},
                    {fixed:"right",align:'center',toolbar:'#barDemo',title:'操作'}
                ]],
                url: '${pageContext.request.contextPath}/holiday/holidayList?empId=' + ${sessionScope.emp.empId},
                method:'post', //post请求
                // page:false, //开启显示分页
                // limits:[5,10,15,20], //切换的每页行数
                // limit:5, //默认的每页行数
                // loading:true, //数据加载效果开启
            });

            table.on('tool(demo)',function (res) {//注：tool是工具事件名，demo是table原始容器的属性是lay-filter=‘对应的值’
                var row = res.data;//获取当前行数据
                var event = res.event;//获取lay-event 对应的值
                var empid = row.empid;//获取员工编号
                // alert(empid);
                if (event == 'del'){
                    //询问框
                    layer.confirm('是否确定删除该员工？',{
                        btn:['是','否']//按钮
                    },function () {
                        $.post("${pageContext.request.contextPath}/gopage/deleteempmessage",{empid:empid},function(data){
                            layer.msg(data.msg);//使用消息层，显示删除的结果。
                            //重新加载数据
                            tabStaff.reload({
                                url:'${pageContext.request.contextPath}/gopage/empmessage'

                            },"json");

                        });
                    });

                } else if (event == 'edit'){//如果点击了修改按钮
                    layer.open({
                        type: 2, //设置为iframe层
                        fix: false, //不固定
                        maxmin: true,//出现最大化最小化按钮
                        offset:'5px',//垂直水平位置
                        shade:0.4, //遮罩层透明度
                        area: ['600px', '500px'], //弹出层宽度高度
                        title: "修改员工", //弹出层标题
                        content: '${pageContext.servletContext.contextPath}/gopage/goupdateempmessage/' + empid //弹出层内网页
                    });
                }

            });

            //监听form表单数据
            form.on('submit(search-btn)',function (d) {
                var empid = $("#empid").val();
                var empname = $("#empname").val();
                var jobid = $("#jobid").val();
                //alert(empid + empname + jobid);
                table.reload('tableData',{//指定条件重载table
                    page: {curr:1},
                    where:{ //条件
                        empid:empid,
                        empname:empname,
                        jobid:jobid
                    }
                });
            });

            $('#add-btn').on("click",function(){
                layer.open({
                    type: 2, //设置为iframe层
                    fix: false, //不固定
                    maxmin: true,//出现最大化最小化按钮
                    offset:'5px',//垂直水平位置
                    shade:0.4, //遮罩层透明度
                    area: ['480px', '500px'], //弹出层宽度高度
                    title: "新增员工", //弹出层标题
                    content: '${pageContext.servletContext.contextPath}/gopage/goaddempmessage' //弹出层内网页
                });
            });

        });
    </script>

</head>
<body>
<div>
    <form class="layui-form" action="${pageContext.request.contextPath}">
        <div class="layui-inline">编号</div>
        <div class="layui-inline">
            <input type="text" id="empid" name="empid" lay-verify="number" class="layui-input" />
        </div>
        <div class="layui-inline">姓名</div>
        <div class="layui-inline">
            <input type="text" id="empname" name="empname" class="layui-input" />
        </div>
        <a class="layui-btn" lay-filter="search-btn" lay-submit lay-size="sm" ><i class="layui-icon" style="font-size: 13px;"
        >&#xe615;搜索</i></a>
    </form>
</div>
<div  class="layui-card-header">
    <a href="#">
        <button class="layui-btn"><i class="layui-icon" id="add-btn" style=" font-size: 15px; top: 200px ">&#xe654添加信息</i>
        </button>
    </a>
    <button class="layui-btn">
        <a href="#">
            <i class="layui-icon" id="derive" style="font-size: 25px;top: 200px ">&#xe66d</i>
        </a>
        打印信息
    </button>
</div>
<table class="layui-table" lay-size="sm" id="tableData" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
</body>
</html>
